<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import SpiritIconPro from '@/components/icons/SpiritIconPro.vue'
import { addCommas } from '@/utils/addCommas'
import { get } from '@/utils/api'

onMounted(async () => {
  data[0].number = await getTotalAuthentications()
  data[1].number = addCommas(8763)
  data[2].number = await getTotalPrograms()
  data[3].number = addCommas(3907.988, true)
})
const getTotalAuthentications = async () => {
  const result = await get('/api/auth/count')
  return addCommas(result)
}
const getTotalPrograms = async () => {
  const result = await get('/api/program/count')
  return addCommas(result)
}
const data = reactive([
  {
    title: '正版授权',
    number: '0',
    footer: '平台正版授权数量（个）',
    icon: 'lock'
  },
  {
    title: '平台用户',
    number: '0',
    footer: '平台全部用户数量（位）',
    icon: 'user'
  },
  {
    title: '应用数量',
    number: '0',
    footer: '平台授权应用数量（个）',
    icon: 'control'
  },
  {
    title: '平台收入',
    number: '0',
    footer: '平台总收入（元）',
    icon: 'pay'
  }
])
</script>

<template>
  <t-row :gutter="[30, 20]">
    <t-col v-for="(item, index) in data" :key="index" :lg="3" :md="3" :sm="6" :xl="3" :xs="12">
      <t-card>
        <t-row>
          <t-col :span="8">
            <div class="title">{{ item.title }}</div>
            <div class="number">{{ item.number }}</div>
          </t-col>
          <t-col :span="4">
            <SpiritIconPro :icon="item.icon" />
          </t-col>
          <t-col :span="12">
            <div class="footer">
              {{ item.footer }}
            </div>
          </t-col>
        </t-row>
      </t-card>
    </t-col>
  </t-row>
</template>

<style lang="sass" scoped>
.title
  font-size: 14px
  font-weight: bolder
.number
  padding: 10px 0
  font-weight: bolder
  font-size: 14px
  color: #409eff
.footer
  color: #909399
</style>
